import type { UploadFile } from 'antd';
import { useState } from 'react';
import type { AliOssProviderValue } from 'ym-design';
import { YmAliOssFilePathRuleProvider, YmUpload, useYmAliOss } from 'ym-design';

const INITIALCONFIGFORPREVIEW: AliOssProviderValue = {
  system: 'Web',
  phone: '12358167307',
  client: 'Boss',
  region: 'oss-cn-hangzhou',
  bucket: 'logibeat-test',
  accessKeyId: 'o6jf22DofRcUAUgz',
  accessKeySecret: 'CQgxlwx1yJOnNOrTokcakAKdB27dSF',
};

function CustomPreviewUpload() {
  const [value, setValue] = useState<any>([
    {
      uid: Math.random().toString(),
      url: 'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/Boss/12358167307/test/202408/20240810_1510_8211f2a9388c4822b3c60cb97c1fe711_Web.png',
    },
    {
      uid: Math.random().toString(),
      url: 'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/Boss/12358167307/test/202408/20240810_1510_6f3054e496fb4c959e0dcd039a628ed0_Web.mp4',
      // type: 'video',
    },
  ]);
  const customRequest = useYmAliOss('test');

  const handlePreview = (file: UploadFile) => {
    console.log('--customPreview--handlePreview--file--:', file);
  };

  const handleFileChange = (fileList: UploadFile[], file: UploadFile) => {
    console.log('--customPreview--handleFileChange--fileList--:', fileList);
  };

  return (
    <YmUpload
      value={value}
      customRequest={customRequest}
      maxCount={5}
      acceptExt="png,jpeg,jpg,mp4,webm,ogg,mov,avi,wmv,flv,3gp"
      multiple
      onChange={handleFileChange}
      onPreview={handlePreview}
    ></YmUpload>
  );
}

function CustomPreview() {
  return (
    <div className="upload-customer-preview">
      <YmAliOssFilePathRuleProvider value={INITIALCONFIGFORPREVIEW}>
        <CustomPreviewUpload />
      </YmAliOssFilePathRuleProvider>
    </div>
  );
}

export default CustomPreview;
